<template>
    <el-row>
        <!-- <el-col :span="24">
            <div class="grid-content bg-purple-dark"><h4 style="line-height:36px;">运费管理</h4></div>
        </el-col> -->
        <el-col style="display:flex;justify-content:center">
            <div style="width:500px;padding-top:100px;">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>运费管理</span>
                        <el-button style="float: right; padding: 3px 0" type="text" @click="dialogVisible = true">修改运费</el-button>
                    </div>
                    <el-table
                    :data="carriageList"
                    border
                    style="width: 100%">
                        <el-table-column
                            prop="distance"
                            label="距离">
                        </el-table-column>
                        <el-table-column
                            prop="price"
                            label="收费标准">
                        </el-table-column>
                    </el-table>
                </el-card>
                <el-dialog
                    title="修改运费"
                    :visible.sync="dialogVisible"
                    width="30%">
                    <el-form ref="form" :model="form" :rules="rules">
                        <el-form-item label="运费管理:" prop="price">
                            <el-input v-model.number="form.price" style="width:50%;" placeholder="请输入运费"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="onSubmit">确 定</el-button>
                    </span>
                </el-dialog>
            </div>
        </el-col>
    </el-row>
</template>
<script>
export default {
    data(){
        return{
            form:{
                price:''
            },
            rules: {
                price: [
                    { required: true, message: '不能为空！', trigger: 'blur' },
                    { type: 'number', message: '运费必须为数字值'}
                ]
            },
            nowPrice:'',
            dialogVisible:false,
            carriageList:[
                {distance:'三公里以内',price:'免运费'},
                {distance:'三公里以外',price:0}
            ]
        }
    },
    watch:{
        nowPrice(newVal){
            this.carriageList[1].price = this.nowPrice+'元'
        }
    },
    methods:{
        onSubmit(){
           this.$http.put(this.apiObj.carriage,{price:this.form.price}).then(data=>{
               if(data.status == 200){
                   this.nowPrice = data.content.price
                   this.dialogVisible = false
                   this.$message.success('修改成功')
               }
           })
        },
        getNowPrice(){
            this.$http.get(this.apiObj.carriage).then(data=>{
                if(data.status == 200){
                    this.nowPrice = data.content.price
                }
            })
        }
    },
    mounted(){
        this.getNowPrice()
        let string = '2.bb.55'
    }
}
</script>

